<template>
  <div class="group-page">
    <div class="item" v-for="item in thisList" :key="item.groupId" @click="navFn(item.groupId)">
      <div class="info">
        <div class="log">
          <img :src="item.img" mode="aspectFill" class="img">
          <span class="state">{{item.preStatus}}</span>
        </div>
        <div class="pInfo">
          <h3 class="name">{{item.title}}</h3>
          <p class="time">创建时间:  {{item.createTime}}</p>
          <button class="btn btn-reset" :id="item.groupId" open-type="share" @click.stop>分享</button>
        </div>
      </div>
    </div>
    <nullList :config="{}" v-if="showNull"></nullList>
  </div>
</template>

<script>
import { imagesLink, timeStamp, overNowTime, timeSort, userLogin, paging } from '@/utils/index'
import nullList from '@/components/nullList'
export default {
  name: '',
  data () {
    return {
      groupId: [],
      thisList: [],
      showNull: false,
    }
  },
  components: {
    nullList
  },
  methods: {
    async mineJoin () {
      var that = this
      this.page = 1
      this.load = true
      this.groupId = []
      this.thisList = []
      
      wx.showToast({
        icon: 'loading',
        duration: 50000,
        title: '请求中...'
      })
      var groupList = await this.$request({
        url: '/GroupBuyBackendV1/getUserGroupBuyInfoByCreaterId/'+ wx.getStorageSync('userId')
      });
      //查询id
      groupList.forEach(function(item, index) {
        item.img = imagesLink(item.images.split(','), 1)[0]
        item.createTime = timeStamp(item.createTime)
        //超时
        if (item.timestamp && overNowTime(item.timestamp)) {
          item.preStatus = '已截止'
        }
      })
      if (groupList.length == 0) {
        this.showNull = true
        return
      }
      wx.hideToast()
      timeSort(groupList)
      this.dataList = groupList

      var res = paging(groupList)
      if (res.data) {
        this.load = false
        this.thisList = res.data
        this.page++
        res.haveNext ? this.load = true : this.load = false
      }
    },
    navFn (gid) {
      wx.navigateTo({
        url: '/pages/group-detail/main?groupId='+ gid
      })
    }
  },
  onLoad () {
    userLogin()
    this.mineJoin();
  },
  onReachBottom () {
    var that = this
    if (this.load == true) {
      this.load = false
      var res = paging(this.dataList, this.page)
   
      if (res.data) {
        res.data.forEach(function(item, index) {
          that.thisList.push(item)
        })
        this.load = true
        this.page++
      }
      if (!res.haveNext) {
        this.load = false
      }
    }
  },
  onShareAppMessage (res) {
    var title = wx.getStorageSync('shareTitle')
    var path = '/pages/index/main'
    if (res.from == 'button') {
      var gid = res.target.id

      this.thisList.forEach(function(item, index) {
        if (item.groupId == gid) {
          title = item.title
          path = '/pages/group-detail/main?groupId=' + gid
        }
      })
     
      return {
        path: path,
        title: title,
        imageUrl: wx.getStorageSync('shareImg'),
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
  .group-page {
    .item {
      background: #ffffff
      border-radius: 16rpx
      margin: 32rpx 30rpx
      padding: 32rpx 0
      position: relative
      box-shadow: 0 10rpx 20rpx #eee
      .info {
        overflow: hidden
        margin: 0 48rpx
      }
      .log {
        float: left
        width: 96rpx
        height: 96rpx
        overflow: hidden
        position: relative
        border-radius: 16rpx
        box-sizing: border-box
        .img {
          width: 96rpx
          height: 96rpx
        }
        .state {
          color: #fff
          text-align: center
          font-size: 15rpx
          position: absolute
          left: 0
          bottom: 0
          width: 100%
          padding: 6rpx 0 0 5rpx
          background: rgba(0,0,0,.6)
        }
      }
      .pInfo {
        float: left
        margin-left: 20rpx
        .name {
          margin-top: 10rpx
          font-size: 36rpx
        }
        .time {
          margin-top: 6rpx
          color: #d3d3d3
          font-size: 22rpx
        }
        .btn {
          top: 50%
          transform: translateY(-50%)
          right: 30rpx
          width: 120rpx
          text-align: center
          line-height: 62rpx
          position: absolute
          font-size: 26rpx
          color: #fff
          border-radius: 31rpx
          background: #ff8942
        }
      }
    }
  }
</style>
